---
title: Animated Grid Pattern
date: 2024-02-07
description: A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.
author: nyxb
published: true
---

<ComponentPreview 
name="animated-grid-pattern-demo"
description="A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS."
 />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx nyx@latest add animated-grid-pattern
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="animated-grid-pattern" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Props

### GridPattern

| Prop              | Type     | Default | Description                                   |
| ----------------- | -------- | ------- | --------------------------------------------- |
| `className`       | `string` | `-`     | Additional classes to be added to the pattern |
| `width`           | `number` | `40`    | Width of the pattern                          |
| `height`          | `number` | `40`    | Height of the pattern                         |
| `x`               | `number` | `-1`    | X offset of the pattern                       |
| `y`               | `number` | `-1`    | Y offset of the pattern                       |
| `strokeDasharray` | `number` | `0`     | Stroke dash array of the pattern              |
| `numSquares`      | `number` | `200`   | Number of squares in the pattern              |
| `maxOpacity`      | `number` | `0.5`   | Maximum opacity of the pattern                |
| `duration`        | `number` | `1`     | Duration of the animation                     |
| `repeatDelay`     | `number` | `0.5`   | Repeat delay of the animation                 |
